
/**
 * 我的订单下拉小组件
 */

import React, { Component } from 'react'
import {
  StyleSheet,
  TextInput,
  Text,
  ScrollView,
  TouchableOpacity,
  View,
  Image
} from 'react-native'

import screen from './screen'
import system from './system'
import Popover from 'teaset/components/Popover/Popover'
import Overlay from 'teaset/components/Overlay/Overlay'
import GetSetStorge from './GetSetStorge'
import ImageResources from './ImageResources'

// const menus = ['我的订单', '酒店', '机票', '火车票', '线路']
const menus = ['首页', '票务记录', '验票', '注销']
export default class DropDownMenu extends Component {

  constructor(props) {
    super(props)
    this.state = {
      status: ImageResources.MyOrderIcon.Down,
      select: 0
    }
  }
  _onPress(index) {
    this.setState({
      select: index
    })
    GetSetStorge.setStorgeAsync('orderMenu', index.toString())
    this.overlayView && this.overlayView.close()
    this.props.callck()
  }


  _onPressButton() {
    this.setState({
      status: ImageResources.MyOrderIcon.Up
    })
    Overlay.show(
      <Overlay.PopView
        ref={v => this.overlayView = v}
        onDisappearCompleted={this._onDisappearCompleted.bind(this)}
        style={[{ alignItems: 'center' }, system.isIPhoneX ? { marginTop: 80 } : { marginTop: 55 }]}
      >
        <Popover style={{ width: 199, borderRadius:5, }} arrow='top' paddingCorner={20}>
          <TouchableOpacity onPress={this._onPress.bind(this, 0)} activeOpacity={0.5}><View style={styles.dropDownList}><Text style={{ lineHeight: 45, paddingHorizontal: 10 }}>首页</Text></View></TouchableOpacity>
          <TouchableOpacity onPress={this._onPress.bind(this, 3)} activeOpacity={0.5}><View style={styles.dropDownList}><Text style={{ lineHeight: 45, paddingHorizontal: 10 }}>验票</Text></View></TouchableOpacity>
          <TouchableOpacity onPress={this._onPress.bind(this, 1)} activeOpacity={0.5}><View style={styles.dropDownList}><Text style={{ lineHeight: 45, paddingHorizontal: 10 }}>票务记录</Text></View></TouchableOpacity>
          <TouchableOpacity onPress={this._onPress.bind(this, 2)} activeOpacity={0.5}><View style={{height: 45,}}><Text style={{ lineHeight: 45, paddingHorizontal: 10 }}>注销</Text></View></TouchableOpacity>
        </Popover>
      </Overlay.PopView>
    );
  }

  _onDisappearCompleted() {
    this.setState({
      status: ImageResources.MyOrderIcon.Down
    })
  }

  render() {
    return (
      <View style={styles.Container}>
        <TouchableOpacity onPress={this._onPressButton.bind(this)} activeOpacity={0.5} style={styles.Container}>
          <Text style={styles.font}>{menus[this.state.select]}</Text>
          <Image source={this.state.status} style={styles.img}/>
        </TouchableOpacity>
      </View>
    )
  }

}

const styles = StyleSheet.create({
  Container:{
    // flex:1,
    flexDirection: 'row',
    justifyContent:'center',
    alignItems:'center'
  },
  img:{
    width:22,
    height:18,
    resizeMode:'contain',
  },
  font: {
    color: '#fff',
    fontSize: 17
  },
  dropDownList:{
    height: 45, 
    borderBottomWidth:1,
    borderColor:'#ccc'
  },
  menuContainer: {
    // backgroundColor: 'red',
    height: 45,
    // position: 'absolute',
    // zIndex: 10,
    // top: 30,
    // // left : 80,
    // width: screen.width
  },
  pop: {
    padding: 10,
    position: 'absolute',
    // height: 160,
    zIndex: 5,
    top: 30,

  }
})